<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8"/>
    <title>学业预警工作助手-登录</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link rel="stylesheet" href="static/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="static/css/login.css">
</head>

<body class="gray-bg">
<div id="loginApp" style="height:100%;">
    <div class="conTop" v-loading="fullscreenLoading" element-loading-text="拼命登录中">
        <div class="conDivcon">
            <div class="conDiv">
                <div>
                    <h1 style="color: #333333;">学业预警工作助手</h1>
                </div>
                <form style="margin-top:20px;">
                    <div class="form-group">
                        <input type="text" id="account" class="form-control ipt" placeholder="用户名" required=""
                               autofocus="autofocus"/>
                    </div>
                    <div class="form-group">
                        <input type="password" id="password" class="form-control ipt" placeholder="密码" required=""/>
                    </div>
                    <div class="form-group" style="display: flex;align-items: center;justify-content: center">
                        <input type="text" id="codeIpt" class="form-control ipt" style="width: 80px;"
                               placeholder="验证码"
                               required=""/>
                        <span id="code" title="看不清，换一张" @click="changeCode"></span>
                    </div>
                    <button type="button" @click="check">登 录</button>
                </form>
            </div>
        </div>
    </div>
</div>
</body>


<script src="static/js/vue.js"></script>
<script src="static/element-ui/lib/index.js"></script>
<script src="static/js/jquery-2.2.3.min.js"></script>
<script>
    var code; //声明一个变量用于存储生成的验证码

    function changeImg() {

        var arrays = new Array(
            '1', '2', '3', '4', '5', '6', '7', '8', '9', '0',

            'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j',

            'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't',

            'u', 'v', 'w', 'x', 'y', 'z',

            'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J',

            'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T',

            'U', 'V', 'W', 'X', 'Y', 'Z'
        );

        code = ''; //重新初始化验证码

        //alert(arrays.length);

        //随机从数组中获取四个元素组成验证码

        for (var i = 0; i < 4; i++) {

            //随机获取一个数组的下标

            var r = parseInt(Math.random() * arrays.length);

            code += arrays[r];

        }

        document.getElementById('code').innerHTML = code; //将验证码写入指定区域

    }

    window.onload = function () {
        $("#account").focus();
        document.getElementById("code").onclick = changeImg();
        document.onkeydown = function (e) {
            // 兼容FF和IE和Opera
            var theEvent = e || window.event;
            var code = theEvent.keyCode || theEvent.which || theEvent.charCode;
            if (code == 13 && loginApp.$data.flag) {
                //回车执行登录
                loginApp.login();
            } else if (code == 13) {
                loginApp.$data.flag = true;
            }
        }
    }


    var basePath = "/" + window.location.pathname.split("/")[1];
    var loginApp = new Vue({
        el: "#loginApp",
        data() {
            return {
                fullscreenLoading: false,
                flag: true
            }
        },
        mounted() {
            changeImg();
        },
        methods: {
            changeCode() {
                changeImg();
            },
            check() {

                var input_code = document.getElementById('codeIpt').value;

                if (input_code.toLowerCase() == code.toLowerCase()) {

                    this.login();

                } else {
                    this.$message.error('请输入正确的验证码！')
                }
            },
            login() {
                console.log(this.fullscreenLoading);
                var user = $("#account").val();
                var password = $("#password").val();
                if (user == '' || password == '') {
                    return this.$message.error('请输入账号或密码！');
                }
                this.fullscreenLoading = true;
                let that = this;
                $.ajax({
                    type: "get",
                    url: basePath + "/loginPost",
                    async: false,
                    data: {"USERNAME": user, "PASSWORD": password},
                    success: function (data) {

                        if (data.msg == '200') {
                            that.fullscreenLoading = false;
                            console.log(data.data)
                            var obj = JSON.stringify(data.data);
                            localStorage.setItem('userInfo', obj);
                            window.location.href = basePath + "/idx_index";
                        } else {
                            that.flag = false;
                            that.fullscreenLoading = false;
                            that.$alert('<strong style="color:red;">账号或密码错误，请重新输入</strong>', '警告', {
                                dangerouslyUseHTMLString: true
                            });
                        }
                    },
                    error: function () {
                        that.flag = false;
                        that.fullscreenLoading = false;
                        that.$confirm('登录错误，请重试?', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(() => {
                        }).catch(() => {
                        });
                    }
                });
            },
            goReg() {
                window.location.href = basePath + "/idx_reg";
            }
        }
    })


</script>


</html>
